<template>
	<view class="pb-150">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="抽样产品检查" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<view class="u-nav-slot" slot="right">
				<view class="fs-32 colfff" @tap="search()">查询</view>
			</view>
		</u-navbar>
		<view class="rowsc rowsm" style="height: 80vh;" v-if="list.length === 0">
			<u-empty mode="data" icon="data"></u-empty>
		</view>
		<!-- 列表 -->
		<view class="w-710 mt-20 bgff pl-32 pr-32 br-20 mgt pt-32 pb-12" v-for="(item, index) in list" :key="index"
			@click="open()">
			<view class="rows rowsm mb-20">
				<image src="/static/icon_rw.png" class="w-40 h-40 mr-20" mode="aspectFill"></image>
				<view class="fs-32 fw-b one_overflow">
					{{ item.title }}
				</view>
			</view>
			<view class="rowsl">
				<view class="fs-28 rows rowsm mb-20">
					<view class="col666 label">检测类别</view>
					<view class="col666 ml-10 mr-10">:</view>
					<view class="fs-28 one_overflow">
						{{ item.year }}
					</view>
				</view>
				<view class="fs-28 rows rowsm mb-20">
					<view class="col666 label">样品名称</view>
					<view class="col666 ml-10 mr-10">:</view>
					<view class="fs-28 one_overflow">
						{{ item.people }}
					</view>
				</view>
				<view class="fs-28 rows rowsm mb-20">
					<view class="col666 label">采样时间</view>
					<view class="col666 ml-10 mr-10">:</view>
					<view class="fs-28 one_overflow">
						{{ item.department }}
					</view>
				</view>
				<view class="fs-28 rows rowsm mb-20">
					<view class="col666 label">检测机构</view>
					<view class="col666 ml-10 mr-10">:</view>
					<view class="fs-28 one_overflow">
						{{ item.time }}
					</view>
				</view>
				<view class="fs-28 rows rowsm mb-20">
					<view class="col666 label">是否超期</view>
					<view class="col666 ml-10 mr-10">:</view>
					<view class="fs-28 col1  one_overflow">
						{{ item.people }}
					</view>
				</view>
				<view class="fs-28 rows rowsm mb-20">
					<view class="col666 label">是否提交</view>
					<view class="col666 ml-10 mr-10">:</view>
					<view class="fs-28 col1  one_overflow">
						{{ item.people }}
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" width="670rpx" @close="show = false" :round="18">
			<view class="w-670 bgfff br-32 rowsal pl-42 pr-42 pt-32 pb-32">
				<view class="fs-40 fw-b mb-20">更多操作</view>
				<view class="rowsbl">
					<view class="fs-32 fw-500 mt-24 mb-24">抽样单详情</view>
					<view class="fs-32 fw-500 mt-24 mb-24">检测信息</view>
				</view>
			</view>
			<view class="rowsc rowsm pt-32 pb-32 fs-36 fw-b " @click="show = false"
				style="border-top: 1rpx solid #E5E5E5;">
				取消
			</view>
		</u-popup>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			show: false,
			list: [
				{
					title: '评价性抽检',
					year: '2026年',
					people: '张三',
					department: '检测中心',
					time: '2026-01-01 2:00'
				},
				{
					title: '评价性抽检',
					year: '2026年',
					people: '张三',
					department: '检测中心',
					time: '2026-01-01 2:00'
				},
				{
					title: '评价性抽检',
					year: '2026年',
					people: '张三',
					department: '检测中心',
					time: '2026-01-01 2:00'
				},
				{
					title: '评价性抽检',
					year: '2026年',
					people: '张三',
					department: '检测中心',
					time: '2026-01-01 2:00'
				},
				{
					title: '评价性抽检',
					year: '2026年',
					people: '张三',
					department: '检测中心',
					time: '2026-01-01 2:00'
				},
			]
		}
	},
	methods: {
		open() {
			this.show = true
		},
		close() {
			this.show = false
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	
	z-index: 1;
}
.label {
	width: 120rpx;
	/* 固定宽度在 flex 布局下也不被压缩 */
	flex: 0 0 120rpx;
	text-align-last: justify;
}
</style>
